<template>
<div class="queryTrips_box">
<div class="search">
    <!-- 车次详情 -->
     <div class="current-search">
        <div class="station">
            <span>上海</span>
            <i>—</i>
            <span>北京</span>
        </div>
        <div class="date">
            <span>2020年01月01日</span>
            <span>(共47个车次)</span>
        </div>
    </div>
<!-- 城市查询 -->
<div class="search-form">
<!--出发城市-->
<el-form :model="Trainform" :inline="true" ref="Trainform" label-width="110px">
<!-- 出发城市 -->
     <el-form-item label="出发城市" style="font-weight: bolder;" prop="formStation">
    <el-input v-model="Trainform.formStation" placeholder="城市名/车站名" style="width:200px" clearable></el-input>
  </el-form-item>
  <!-- 转换图标 -->
<span class="iconfont icon-zhuanhuan"></span>
  <!-- 到达城市 -->
   <el-form-item label="到达城市" style="font-weight: bolder;" prop="toStation">
    <el-input v-model="Trainform.toStation"placeholder="城市名/车站名"  style="width:200px" clearable></el-input>
  </el-form-item>
    <!-- 出发日期 -->
     <el-form-item label="出发日期" style="font-weight: bolder;" prop="formDate">
    <el-date-picker style="width:200px"
      v-model="Trainform.formDate"
      align="right"
      type="date"
      placeholder="选择出发日期"
      :picker-options="pickerOptions">     
    </el-date-picker>
  </el-form-item>
 <!--搜索按钮-->
 <el-form-item>
   <el-button type="primary" @click="SerachBtn">搜 索</el-button>
  </el-form-item>
    </el-form>
</div>
</div>
 <!-- /*车次类型过滤*/ -->
<div class="filter-box">
<ul >
    <li v-for="(filter,index) in filterForm" :key="filter.id">
        <span style="font-size: 20px;font-weight: bolder;">{{filter.title}}</span>

        <el-button :type="ckData[filter.id]?(ckData[filter.id].length==0?'primary':''):'primary'" @click="buxiangBtn">{{filter.btn}}</el-button> 


    <span v-for="(ck,index2) in filter.ckBox" :key="ck.id" >
        <el-checkbox label="" 
        :checked="ck.isCk"  @change="ckBoxClick(filter.id,ck.id)">{{ck.label}}</el-checkbox>
    </span>
      <!-- <el-checkbox label="fliter.type" name="type"></el-checkbox>
      <el-checkbox label="D-动车" name="type"></el-checkbox>
      <el-checkbox label="普通车型" name="type"></el-checkbox> -->

    </li>
   
</ul>
 <el-link class="clearFilters">清除筛选条件</el-link>
 <el-link class="putAwayFilters" >收起筛选条件
   <i class="el-icon-caret-top"></i>
 </el-link>
</div>
<!-- 车次列表 -->
<div class="train-list">
<el-table
      :data="TrainItem"
      style="width: 100%">
      <el-table-column
        label="车次"
        width="240"
        header-align="center"
        align="center">
      <template slot-scope="train">
        <!-- <i class="el-icon-time"></i> -->
        <span style="margin-left: 10px ;font-weight: bolder;font-size:17px;">{{ train.row.TrainNo }}</span>
      </template>
      </el-table-column>
      <el-table-column
        label="始末站"
        width="240"
        header-align="center"
        align="center">
         <template slot-scope="train">
        <!-- <i class="el-icon-time"></i> -->
        <i class="k-start"></i>
        <p style="margin-left: 10px">{{ train.row.FromStation }}</p>
        <p style="margin-left: 10px">{{ train.row.ToStation }}</p>
      </template>
      </el-table-column>
      <el-table-column
        label="出发/到达时间"
        width="240"
        header-align="center"
        align="center">
         <template slot-scope="train">     
        <p style=" font-weight: bolder;font-size:17px;"><i class="el-icon-time"></i>{{ train.row.FromTime }}</p>       
        <p style=""><i class="el-icon-time"></i>{{ train.row.ToTime }}</p>
      </template>
      </el-table-column>

       <el-table-column
        label="耗时"
        width="240"
        header-align="center"
        align="center">
         <template slot-scope="train">     
        <p style="margin-left: 10px"><i class="el-icon-time"></i>{{ train.row.UsedMinutes }}</p>       
      </template>
      </el-table-column>

      <el-table-column
        label="参考票价"
        width="280"
        header-align="center"
        align="center">
         <template slot-scope="train">     

        <span style="margin-left: 25px;font-weight: bolder;font-size:17px;"></i>{{ train.row.SeatName }}</span>    
        <span style="margin-left: 25px;color:#ff6a00; font-weight: bolder;font-size:17px;"></i>￥{{ train.row.Price }}</span> 
        <span style="margin-left: 25px"></i>余<var style="color:#ff6a00;">{{ train.row.SeatCnt }}</var>张</span> 

      </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="260"
        header-align="center"
        align="center">
         <template slot-scope="train">
           <span ><el-button type="primary" size="mini">{{train.row.book}}</el-button></span>
         </template>
      </el-table-column>
    </el-table>

</div>

</div> 
</template>

<script>
export default {
  name: 'queryTrips',
  components: {},
  data() {
    return {
      TrainItem:[
        {TrainNo:'G1304',FromStation:'广州南',ToStation:'上海虹桥',FromTime:'13.24',ToTime:'21.24',UsedMinutes:'8小时20分',SeatName:'硬座',Price:' 2492.5',SeatCnt:'99',book:'预定'}
      ],
        // checkList:[],
        //checkbox选择框
        ckData:{},
        // 车次过滤表单
        filterForm:[
            {id:1,title:'车次类型',btn:'不限',ckBox:[
                {isCk:false,id:101,label:'G/C-高铁'},
                {isCk:false,id:102,label:'D-动车'},
                {isCk:false,id:103,label:'普通车型'}

            ]},
            {id:2,title:'出发站台',btn:'不限',ckBox:[
                {isCk:false,id:201,label:'上海虹桥'},
                {isCk:false,id:202,label:'上海站'},
                {isCk:false,id:203,label:'上海南站'}

            ]},
            {id:3,title:'到达车站',btn:'不限',ckBox:[
                {isCk:false,id:301,label:'北京南站'},
                {isCk:false,id:302,label:'北京站'}
            ]},
            {id:4,title:'是否有票',btn:'不限',ckBox:[
                {isCk:false,id:401,label:'只看有票'}
            ]}
        ],
        //查询表单
        Trainform:{
                formStation:'',
                toStation:'',
                formDate:''
        },
           // 验证
        rules:{
          formStation:[
            {required: true, message: '请输入出发城市', trigger: 'blur'},
            
          ],
          toStation:[
             {required: true, message: '请输入到达城市', trigger: 'blur'}
          ],
          formDate:[
            { type: 'date', required: true, message: '请选择出发日期', trigger: 'change' }
          ]
        },
          // 出发日期事件
      pickerOptions: {
      
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        }
    }
  },
  methods: {
      //查询按钮
      SerachBtn(){
          
      },
      //不限按钮
      buxiangBtn(){
       this.ckData=[]
      
         this.$forceUpdate()
      },
      //复选框点击事件
      ckBoxClick(ckId1,ckId2){
        if (this.ckData[ckId1]) {
            let a= this.ckData[ckId1]
            if (a.includes(ckId2)) {
                console.log('ckId2',ckId2)
                // console.log("22222",this.ckData[ckId1])
                // this.ckData[ckId1].remove(ckId2)
            for (let i = 0; i < a.length; i++) {
                const element = a[i];
                if (element==ckId2) {
                    this.ckData[ckId1].splice(i,1)
                    console.log('element',element)
                    break
                }
            }               
            }
            else{
             this.ckData[ckId1].push(ckId2)
            }
        }
        else{
            this.ckData[ckId1]=[ckId2]
        }
        this.$forceUpdate()
        console.log("this.ckData",this.ckData)
      }
  }
}
</script>

<style scoped >

.queryTrips_box{
    width: 1500px;
  margin: 0 auto;
   background-color: #f8f8f8; 
}
/*查询*/
.search {
    width: 100%;
    height: 90px;
    background: #D3DCE6;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
}
  .search .current-search {
        float: left;
        width: 239px;
        height: 65px;
        overflow: hidden;
        padding-top: 20px;
        padding-left: 21px;
        position: relative;
        border-right: 1px solid white
    }
    /*车站*/
        .search .current-search .station {
            font-size: 20px;
            color: #333;
            height: 25px;
            line-height: 25px;
            font-weight: bolder;

        }
        /* //查询出发城市 */
.search-form{
    /* border: 1px solid red; */
    line-height: 90px;
    width: 1231px;
    float: left;
}

.el-input{
line-height: 90px;
}   
/* 转换图标 */
.icon-zhuanhuan{
 color:cornflowerblue;
 font-size: 30px;
 margin-left: 15px;
}
.el-button{
    width: 100px;
    margin-left: 30px;
    margin-top:24px;
}    
/* 车次过滤 */
.filter-box,.train-list{
width: 100%;
padding-bottom: 15px;
background-color: #E9EEF3
}
.filter-box ul{
  width:1200px;
}
.filter-box ul li{
    list-style: none;
}
.filter-box ul li .el-button {
    margin-right: 30px;
}

 .el-checkbox{
    font-size: 20px;
    margin-left: 30px;
    font-weight: bolder
}
/* 清楚筛选条件 */
.clearFilters{
float: right;
right: 40px;
top:-260px;
font-size: 20px;color: dodgerblue
}
/* 收起筛选条件 */
.putAwayFilters{
  float: right;
  left: 70px;
top:-50px;
font-size: 20px;
color: dodgerblue
}


/*车次列表*/
.train-list .el-table{
  margin-top: 20px;
}


</style>

